import { createApp } from 'vue'
import router from './router'
import store from '@/stores/index'
import other from '@/utils/other'
import { i18n } from '@/i18n'
import { directive } from '@/directive'
import { themeConfig } from '@/storage'
import { columnFilterMethod } from './views/components/grid/libs'

import ElementPlus from 'element-plus'
// import 'element-plus/dist/index.css'

import VueJsonPretty from 'vue-json-pretty'

import VxeTable, { type VxeComponentSizeType } from 'vxe-table'
import VxeUI from 'vxe-pc-ui'
import '@/utils/validators'

import VxeUIPluginExportXLSX from '@vxe-ui/plugin-export-xlsx'
import ExcelJS from 'exceljs'

import VxeUIPluginRenderElement from '@vxe-ui/plugin-render-element'
import '@vxe-ui/plugin-render-element/dist/style.css'

import App from './App.vue'

// 扩展 element-plus - dayjs 接口
declare module 'element-plus' {
  module dayjs {
    interface Dayjs {
      dayOfYear: () => number
      week: () => number
    }
  }
}

// 自定义css
import './assets/main.css'
// 动画库
import 'animate.css'
// 自定义Element-plus主题
import '@/theme/index.scss'
// 轻量级JSON格式化
import 'vue-json-pretty/lib/styles.css'

function bootstrap() {
  const app = createApp(App)
  const { globalComponentSize } = themeConfig.value

  let size: VxeComponentSizeType = 'mini'
  if (globalComponentSize === 'mini') {
    size = 'mini'
  } else if (globalComponentSize === 'default') {
    size = 'small'
  } else if (globalComponentSize === 'large') {
    size = 'medium'
  }

  // 状态机
  app.use(store)

  // 指令
  directive(app)

  // svg
  other.elSvg(app)

  // 多语言
  app.use(i18n)

  // 路由
  app.use(router)

  // element-plus
  app.use(ElementPlus)

  // JSON预览模块
  app.component('vue-json-pretty', VueJsonPretty)

  // 表格全局配置
  VxeUI.VxeUI.use(VxeUIPluginExportXLSX, { ExcelJS })
  VxeUI.VxeUI.use(VxeUIPluginRenderElement)
  VxeUI.setConfig({
    size,
    zIndex: 100,
    table: {
      minHeight: 50,
      align: 'center',
      exportConfig: {
        type: 'xlsx',
        isColgroup: true,
        isMerge: true,
        isHeader: true,
        // useStyle: false,
        // 过滤掉特殊列
        columnFilterMethod
      },
      columnConfig: {
        resizable: true
      }
    }
  })
  // vxe表格
  app.use(VxeUI).use(VxeTable)

  // main
  app.mount('#app')
}

bootstrap()
